<template>
  <el-dialog
    class="modify-class"
    width="900px"
    title="查看详情"
    visible
    append-to-body
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
  <!-- popper-class="table-select-poppper" -->
  <el-form class="modify-form mt20" :model="formData" label-width="120px">
    <el-form-item label="详情标题" prop="qualityTitle">
      <el-input
        class="input"
        v-model="formData.qualityTitle"
        placeholder="请输入详情标题"
        style="width: 260px;"
        :disabled="disabled"
      />
    </el-form-item>
    <el-form-item label="详情描述" prop="qualityDescribe">
      <el-input
        class="desc-input"
        type="textarea"
        v-model="formData.qualityDescribe"
        :rows="5"
        placeholder="请输入相关描述......"
        :disabled="disabled"
      />
    </el-form-item>
    <el-form-item :label=" technology ? '变更申请报告' : '附件列表'" style="margin-bottom: 5px">
      <div style="float: right;" class="btn-list">
        <div class="btn-40 btn-img hover"  @click="batchDownloadHandle">
          <span class="icon-img download"></span>
        </div>
        <!-- <el-button class="btn-common" :disabled="!selection || selection.length == 0" icon="el-icon-download" @click="batchDownloadHandle"/> -->
        <upload-attach v-if="!disabled" style="margin-left: 10px;" @upload-success="uploadSuccess"/>
        <div v-if="!disabled" class="btn-40 btn-img hover"  @click="batchDeleteHandle">
          <span class="icon-img delete"></span>
        </div>
        <!-- <el-button class="btn-common" :disabled="!selection || selection.length == 0" icon="el-icon-delete" @click="batchDeleteHandle"/> -->
      </div>
    </el-form-item>
    <div>
      <c-table :table-column="tableColumn" :table-data="formData.attachList" is-selection :operation="false" @fileName="fileNameHandle" @selection="selectionHandle">
      </c-table>
    </div>
  </el-form>
  <div class="dialog-footer" slot="footer">
    <el-button v-if="!disabled" class="btn-comfirm" type="primary" @click="saveHandle">确认</el-button>
    <el-button class="btn-cancel" @click="cancelHandle">取消</el-button>
  </div>
  </el-dialog>
</template>

<script>
import UploadAttach from '@/components/UploadAttach.vue'
import qualityApi from '@/apis/overview/quality.js'
import technologyApi from '@/apis/overview/technology.js'
import {exportFile} from '@/utils/index.js'
const dateUtil = require('element-ui/lib/utils/date-util.js')

export default {
  components: {UploadAttach},
  props: {
    detailData: {
      type: Object,
      default() {
        return {}
      }
    },
    technology: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        id: this.detailData.id,
        qualityTitle: '',
        qualityDescribe: '',
        attachList: []
      },
      tableColumn: {
        selection: {
          type: 'selection'
        },
        fileName: {
          label: this.technology ? '变更概述' : '质量问题概述',
          type: 'link',
          columnProp: {
            align: 'center',
            'min-width': '400px',
          }
        },
        operatorTime: {
          label: '日期',
          columnProp: {
            align: 'center',
            'min-width': '160px',
            formatter: this.operatorTimeFormatter
          }
        }
      },
      selection: []
    }
  },
  methods: {
    uploadSuccess(data) {
      this.formData.attachList.push(data)
    },
    operatorTimeFormatter(row) {
      if (!row.operatorTime) {
        return ''
      }
      return dateUtil.formatDate(new Date(row.operatorTime), 'yyyy-MM-dd')
    },
    batchDownloadHandle() {
      this.selection.forEach(row => {
        this.fileNameHandle(row)
      })
    },
    batchDeleteHandle() {
      let tableList = this.formData.attachList
      if(tableList.length > 0) {
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.selection.forEach(row => {
            let index = tableList.findIndex(item => item.id == row.id)
            if(index >= 0) {
              tableList.splice(index, 1)
            }
          })
        })
      }
    },
    selectionHandle(selection) {
      this.selection = selection
    },
    fileNameHandle(row) {
      exportFile(process.env.VUE_APP_BASE_API + 'attach/download', {id: row.id}, row.fileName)
    },
    close(refresh) {
      this.$emit("close", refresh);
    },
    beforeClose() {
      this.close(false);
    },
    saveHandle() {
      const postData = {...this.formData}
      let method = qualityApi.qualitySaveAttachList
      if (this.technology) {
        method = technologyApi.technologySaveAttachList
        postData.changeDescribe = postData.qualityDescribe
      }
      postData.attachList = postData.attachList.map(item => item.id)
      method(postData).then(() => {
        this.$message.success('保存成功')
        this.close(true)
      })
    },
    cancelHandle() {
      this.close(false)
    },
    requestDetail() {
      let method = this.technology ? technologyApi.findAttachListByTechnologyId : qualityApi.findAttachListByQualityId
      method({id: this.detailData.id}).then(({data = {}}) => {
        if (this.technology) {
          data.qualityDescribe = data.changeDescribe
        }

        data.attachList = data.attachList || []
        Object.assign(this.formData, data)
      })
    }
  },
  mounted(){
    this.requestDetail()
  }
}
</script>

<style>

</style>